<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
</head>
<body>

<div id="app">
    <!-- 路由的出口-->
    <router-view></router-view>

    <router-link to="/login?username=tom&password=123456">登录</router-link>
    <router-link to="/register/tom/123456">注册</router-link>
    <hr>
    <router-link :to="{path:'/login',query:{username:'jack',password:'123456'}}">登录</router-link>
    <router-link :to="{name:'register',params:{username:'jack',password:'123456'}}">注册</router-link>
    <hr>
    <button @click="login">登录</button>
</div>

<script>

    const login = {
        name: 'Login',
        template: `
            <div>
                <h3>欢迎登录</h3>
                <form action="#">
                    <p><input type="text" name="username" placeholder="请输入用户名"></p>
                    <p><input type="password" name="password" placeholder="请输入密码"></p>
                    <p><input type="submit"  value="立即登录"></p>
                </form>
            </div>
        `,
        created(){
            console.log("-----------login-------------")
            console.log(this.$route)

            // let password = this.$route.query.password;
            // let username = this.$route.query.username;

            // 解构赋值  ES6
            let  {username,password}  =  this.$route.query  // {username:tom,password:123456}
            console.log("username:"+username)
            console.log("password:"+password)
        }
    }

    const register = {
        name: 'Register',
        template: `
            <div>
                <h3>欢迎注册</h3>
                <form action="#">
                    <p><input type="text" name="username" placeholder="请输入用户名"></p>
                    <p><input type="password" name="password" placeholder="请输入密码"></p>
                    <p><input type="submit"  value="立即注册"></p>
                </form>
            </div>
        `,
        created(){
            console.log("-----------register-------------")
            console.log(this.$route)

            // 解构赋值  ES6
            let  {username,password}  =  this.$route.params  // {username:tom,password:123456}
            console.log("username:"+username)
            console.log("password:"+password)


        }
    }

    const routes = [
        {
            path: '/',
            redirect: '/login'   //  路径的重定向
        },
        {
            path: '/login',
            name: 'login',
            component: login
        },
        {
            path: '/register/:username/:password',
            name: 'register',
            component: register
        }

    ]
    //2. 创建路由对象  VueRouter
    const router = new VueRouter({
        routes
    })

    const vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            login(){
                console.log("----------login----------")
                // this.$router.push("/login?username=tom&password=123456")
                this.$router.push({path:'/login',query:{username:'jack',password:'123456'}})
            }
        },
        router
    })
</script>
</body>
</html>
